<template>
  <div class="">
    <div id="bag1" class="a">
      <p>未完成</p>
      <p
        @click="flagtop == 1 ? (flagtop = 2) : (flagtop = 1)"
        :class="flagtop == 1 ? 'rote' : 'rote2'"
      >
        >
      </p>
    </div>

    <transition name="animation">
      <div v-show="flagtop == 1" class="list" >
        <div v-show="v.check == 0" v-for="v in objList" :key="v.id" class="top">
          <input
            :checked="v.checked"
            @change="checkAll(v.id)"
            type="checkbox"
            name=""
            id=""
          />
          <li>{{ v.value }}</li>
          <button class="rightList" @click="off(v.id)">取消</button>
        </div>
      </div>
    </transition>
    <!-- 内容 -->
    <div id="bag2" class="a">
      <p>未完成</p>
      <p
        @click="flag == 1 ? (flag = 2) : (flag = 1)"
        :class="flag == 1 ? 'rote' : 'rote2'"
      >
        >
      </p>
    </div>
    <div v-show="flag == 1">
      <div
        v-show="v.check == 1"
        v-for="v in objList"
        :key="v.id"
        class="active"
      >
        <input
          :checked="v.checked"
          @change="checkAll(v.id)"
          type="checkbox"
          name=""
          id=""
        />
        <li>{{ v.value }}</li>
        <p class="rightList">{{ v.time }}</p>
      </div>
    </div>

    <!-- 内容 -->
    <div id="bag3" class="a ">
      <p>已取消</p>
      <p
        @click="flagbot == 1 ? (flagbot = 2) : (flagbot = 1)"
        :class="flagbot == 1 ? 'rote' : 'rote2'"
      >
        >
      </p>
    </div>
    <div v-show="flagbot == 1">
      <div v-show="v.check == 2" v-for="v in objList" :key="v.id" class="bot">
        <input type="checkbox" name="" id="" />
        <li>{{ v.value }}</li>
        <button class="rightList" @click="off(v.id)">恢复</button>
      </div>
    </div>
    <!-- 内容 -->
  </div>
</template>

<script>
import { computed, ref, watch } from "vue";
import { useStore } from "vuex";

export default {
  setup(props) {
    let store = useStore();
    let flagtop = ref(1);
    let flag = ref(0);
    let flagbot = ref(0);
    let objList = computed(() => store.state.objList);
    let num = ref(0);
 

    function checkAll(id) {
      store.commit("checkAll", id);
    }

    function off(id) {
      store.commit("off", id);
    }

    function isShow() {}
    // 展示
    return {
      num,
      objList,
      checkAll,
      off,
      isShow,
      flag,
      flagtop,
      flagbot,
    };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.animation-enter-from,
.animation-leave-to {
  height: 0 !important;
  opacity: 0;
}
.animation-enter-active,
.animation-leave-active {
  opacity: 0;
  transition: all 0.5s linear;
}
.list {
  height: 200px;
}
.rote {
  transform: rotate(90deg);
}
.rote2 {
  transform: rotate(0deg);
}
.top,
.active,
.bot {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 1s;
}
.rightList {
  position: absolute;
  right: 10px;
}
input {
  margin: 0 10px;
  width: 18px;
  height: 18px;
}
button {
  width: 55px;
  height: 72%;
  background-color: #fff;
  border: 1px solid rgb(80, 79, 79);
  border-radius: 4px;
}
.a {
  width: 100%;
  height: 40px;
  background-color: #f49995;
  display: flex;
  align-items: center;
  justify-content: space-between;
  p {
    &:nth-of-type(1) {
      font-size: 18px;
      color: #fff;
      margin-left: 10px;
    }
    &:nth-of-type(2) {
      transition: all 1s;
      font-size: 30px;
      color: #fff;
      margin-right: 10px;
    }
  }
}
</style>
